<template>
  <!-- 单体电池数据 弹窗 -->
  <a-modal
    v-model:open="visible"
    title="单体电池数据"
    @ok="handleOk"
    destroyOnClose
    :width="1000"
    @cancel="cancel"
    centered
  >
    <a-form :model="filterForm" layout="inline" class="filterContent">
      <a-form-item label="电池堆名称">
        <a-select
          ref="select"
          v-model:value="filterForm.linkId"
          class="formInput"
          allow-clear
          placeholder="请选择"
          @change="changeLink"
        >
          <a-select-option
            v-for="item in energyLinkList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="电池簇名称">
        <a-select
          ref="select"
          v-model:value="filterForm.blockId"
          class="formInput"
          allow-clear
          placeholder="请选择"
          @change="changeBlock"
        >
          <a-select-option
            v-for="item in blockList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="模块名称" v-if="!!batteryList.length">
        <a-select
          ref="select"
          v-model:value="filterForm.batteryId"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in batteryList"
            :value="item.batteryId"
            :key="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="Pack名称" v-else>
        <a-select
          ref="select"
          v-model:value="filterForm.pack"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option
            v-for="(item, index) in batteryInfo.packNumberPerCluster"
            :value="index + 1"
            :key="index + 1"
          >
            {{ index + 1 }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="电芯名称">
        <a-select
          ref="select"
          v-model:value="filterForm.cell"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option
            v-for="(item, index) in batteryInfo.cellNumberPerPack"
            :value="index + 1"
            :key="index + 1"
          >
            {{ index + 1 }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="日期">
        <a-date-picker
          v-model:value="filterForm.date"
          placeholder="选择日期"
          class="formSelect"
          formatter="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :allowClear="false"
        />
      </a-form-item>
      <a-form-item label="时间段">
        <a-select class="formSelect" v-model:value="filterForm.hourPeriod">
          <a-select-option value="0-5">00:00-05:59</a-select-option>
          <a-select-option value="6-11">06:00-11:59</a-select-option>
          <a-select-option value="12-17">12:00-17:59</a-select-option>
          <a-select-option value="18-23">18:00-23:59</a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="getBatteryHistoryData"
        >查询</a-button
      >
    </a-form>
    <div class="tableContent">
      <a-table
        :dataSource="tableData"
        :columns="columns"
        size="small"
        :scroll="{ x: 'max-content', y: 'calc(100vh - 450px)' }"
        @resizeColumn="handleResizeColumn"
        :pagination="{
          total: tableData.length,
          showTotal: (total) => `共 ${total} 条`,
        }"
        showTotal
        :loading="tableLoading"
        class="tableContent"
      >
        <template #bodyCell="{ column, record }"> </template>
      </a-table>
    </div>
    <template #footer>
      <div class="footerBar">
        <a-button v-hasPermission="'monitorBatteryExportData'" class="yellowBtn" @click="handleExport">导出</a-button>
        <a-button key="submit" type="primary" @click="cancel">关闭</a-button>
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import { transformExportData } from "@/utils/common";
import utilsExportFile from "@/utils/exportFile";
const $api = inject("$api");
const props = defineProps({
  detailsDataVisible: {
    type: Boolean,
    default: false,
  },
  stationInfo: {
    type: Object,
  },
  energyLinkList: {
    type: Array,
  },
});
const visible = ref(props.detailsDataVisible);
const emits = defineEmits(["update:detailsDataVisible", "getParamCodePage"]);
watch(
  () => props.detailsDataVisible,
  (val) => {
    visible.value = val;
    if (val) {
      getBatteryPackInfo();
    }
  }
);
const labelCol = { style: { width: "130px" } };
const tableData = ref([]);
const filterForm = ref({
  linkId: null,
  blockId: null,
  pack: null,
  cell: null,
  date: null,
  hourPeriod: "0-5",
});
const columns = ref([
  {
    title: "电池堆名称",
    dataIndex: "linkName",
    key: "linkName",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "电池簇名称",
    dataIndex: "blockName",
    key: "blockName",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "pack/模块",
    dataIndex: "packName",
    key: "packName",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "电芯名称",
    dataIndex: "cellName",
    key: "cellName",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "时间",
    dataIndex: "dateTime",
    key: "dateTime",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "电压(mV)",
    dataIndex: "volt",
    key: "volt",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "温度(℃)",
    dataIndex: "temperature",
    key: "temperature",
    width: 150,
    resizable: true,
    align: "center",
  },
]);
const batteryInfo = ref({});
const cancel = () => {
  emits("update:detailsDataVisible", false);
  filterForm.value = {
    linkId: null,
    blockId: null,
    pack: null,
    cell: null,
    date: null,
    hourPeriod: "0-5",
  };
  tableData.value = [];
};
const tableLoading = ref(false);
const getBatteryPackInfo = async () => {
  const params = {
    stationId: props.stationInfo.id,
  };
  const res = await $api.batteryPackInfo(params);
  if (res && res.code === 0) {
    batteryInfo.value = res.data;
  }
};
const batteryList = ref([]);
const batteryBlockList = async (blockId) => {
  if (!blockId) {
    return;
  }
  const res = await $api.batteryBlockList(blockId);
  if (res && res.code === 0) {
    batteryList.value = res.data.filter(item => item);
    filterForm.value.batteryId = batteryList.value?.[0]?.batteryId;
  }
};
const handleExport = async () => {
  const exportData = {
    title: columns.value.map((item) => item.title),
    list: transformExportData(
      tableData.value,
      columns.value.map((item) => item.key)
    ),
  };
  const res = await $api.exportCommon(exportData);
  utilsExportFile.exportFile(res, `${"单体电池历史数据"}.xlsx`);
};
const changeLink = async (id) => {
  filterForm.value.blockId = null;
  filterForm.value.batteryId = null;
  if (!id) {
    blockList.value = [];
    batteryList.value = [];
    return;
  }
  await getBlockList(id);
  batteryBlockList(filterForm.value.blockId);
};
const blockList = ref([]);
const changeBlock = async (id) => {
  filterForm.value.batteryId = null;
  if (!id) {
    batteryList.value = [];
    return;
  }
  batteryBlockList(id);
};
const getBlockList = async (id) => {
  const params = {
    stationId: props.stationInfo.id,
    linkId: id,
  };
  const res = await $api.powerBlockList(params);
  if (res && res.code === 0) {
    blockList.value = res.data;
    filterForm.value.blockId = blockList.value?.[0].deviceId;
  }
};
const getBatteryHistoryData = async () => {
  if (!filterForm.value.blockId) {
    message.error("请选择电池簇");
    return;
  }
  if (!filterForm.value.pack && !filterForm.value.batteryId) {
    message.error("请选择Pack");
    return;
  }
  if (!filterForm.value.cell) {
    message.error("请选择电芯");
    return;
  }
  if (!filterForm.value.date) {
    message.error("请选择日期");
    return;
  }
  if (!filterForm.value.hourPeriod) {
    message.error("请选择时间段");
    return;
  }
  const params = {
    stationId: props.stationInfo.id,
    ...filterForm.value,
  };
  tableLoading.value = true;
  const res = await $api.batteryHistoryData(params);
  tableLoading.value = false;
  if (res && res.code === 0) {
    tableData.value = res.data;
    const linkName = props.energyLinkList.find(
      (item) => item.deviceId === filterForm.value.linkId
    ).name;
    const blockName = blockList.value.find(
      (item) => item.deviceId === filterForm.value.blockId
    ).name;
    const packName = filterForm.value.pack; // pack目前纯数字
    const batteryName = batteryList.value.find(
      (item) => item.batteryId === filterForm.value.batteryId
    )?.name;
    const cellName = filterForm.value.cell; // 电芯目前纯数字
    for (const item of tableData.value) {
      item.linkName = linkName;
      item.blockName = blockName;
      item.packName = batteryName || packName;
      item.cellName = cellName;
    }
  }
};
</script>

<style lang="less" scoped>
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.filterContent {
  margin-top: 20px;
}
.ant-form-item {
  margin-bottom: 20px;
}
.formInput {
  width: 160px;
}
.formSelect {
  width: 140px;
}
</style>
